﻿<div [@routerTransition]>
    <div id="HostDashboard">
        <div class="m-subheader">
            <div class="row align-items-center">
                <div class="mr-auto col-auto">
                    <h3
                        class="m-subheader__title m-subheader__title--separator"
                    >
                        <span>导管制造</span>
                    </h3>
                    <span class="m-section__sub">
                        情况汇总
                    </span>
                </div>
            </div>
        </div>

        <div class="m-content">
            <div class="m-portlet">
                <div class="m-portlet__body m-portlet__body--no-padding">
                    <div class="row m-row--no-padding m-row--col-separator-xl">
                        <div class="col-xl-4">
                            <!--begin:: Widgets/Stats2-1 -->
                            <div class="m-widget1">
                                <div class="m-widget1__item">
                                    <div
                                        class="row m-row--no-padding align-items-center"
                                    >
                                        <div class="col">
                                            <h3 class="m-widget1__title">
                                                在线任务
                                            </h3>
                                            <span class="m-widget1__desc">
                                                当前正在进行的任务
                                            </span>
                                        </div>
                                        <div class="col m--align-right">
                                            <span
                                                class="m-widget1__number m--font-brand"
                                            >
                                                {{ numberOfSummary.inlineNum }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-widget1__item">
                                    <div
                                        class="row m-row--no-padding align-items-center"
                                    >
                                        <div class="col">
                                            <h3 class="m-widget1__title">
                                                问题任务
                                            </h3>
                                            <span class="m-widget1__desc">
                                                暂停的任务
                                            </span>
                                        </div>
                                        <div class="col m--align-right">
                                            <span
                                                class="m-widget1__number m--font-warning"
                                            >
                                                {{
                                                    numberOfSummary.inlineNumForRequest
                                                }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-widget1__item">
                                    <div
                                        class="row m-row--no-padding align-items-center"
                                    >
                                        <div class="col">
                                            <h3 class="m-widget1__title">
                                                近期报废
                                            </h3>
                                            <span class="m-widget1__desc">
                                                近一个月
                                            </span>
                                        </div>
                                        <div class="col m--align-right">
                                            <span
                                                class="m-widget1__number m--font-danger"
                                            >
                                                {{
                                                    numberOfSummary.inlineNumForScrap
                                                }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-widget1__item">
                                    <div
                                        class="row m-row--no-padding align-items-center"
                                    >
                                        <div class="col">
                                            <h3 class="m-widget1__title">
                                                近期交付
                                            </h3>
                                            <span class="m-widget1__desc">
                                                近一个月
                                            </span>
                                        </div>
                                        <div class="col m--align-right">
                                            <span
                                                class="m-widget1__number m--font-success"
                                            >
                                                {{
                                                    numberOfSummary.inlineNumForComplete
                                                }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end:: Widgets/Stats2-1 -->
                        </div>

                        <div class="col-xl-4">
                            <!--begin:: Widgets/Profit Share-->
                            <div class="m-widget14">
                                <div class="m-widget14__header">
                                    <h4 class="m-widget14__desc-text">
                                        任务分布
                                    </h4>
                                    <span class="m-widget14__desc">
                                        型号分布情况
                                    </span>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col">
                                        <div
                                            id="m_chart_profit_share"
                                            class="m-widget14__chart"
                                            style="height: 160px;"
                                        >
                                            <p-chart
                                                type="doughnut"
                                                [data]="data"
                                                [options]="dataOption"
                                            ></p-chart>
                                        </div>
                                    </div>
                                    <!-- <div class="col">
                                        <div class="m-widget14__legends">
                                            <div *ngFor="let model of numberOfModel" class="m-widget14__legend"
                                                (click)="openProcess(model.key,'','')">
                                                <span class="m-widget14__legend-bullet m--bg-accent"></span>
                                                <span class="m-widget14__legend-text">
                                                    {{model.key}} — {{model.value}}
                                                </span>
                                            </div>

                                        </div>
                                        
                                    </div>-->
                                </div>
                            </div>
                            <!--end:: Widgets/Profit Share-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-4">
                    <!--begin:: Packages-->
                    <div
                        class="m-portlet m--bg-warning m-portlet--bordered-semi m-portlet--full-height"
                    >
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <i
                                        class="flaticon-map-location m--font-light"
                                    ></i>
                                    <h3
                                        class="m-portlet__head-text m--font-light"
                                    >
                                        工位情况
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <ul class="m-portlet__nav">
                                    <li
                                        class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push"
                                        m-dropdown-toggle="hover"
                                        aria-expanded="true"
                                    >
                                        <a
                                            href="#"
                                            class="m-portlet__nav-link m-dropdown__toggle dropdown-toggle btn btn--sm m-btn--pill m-btn btn-outline-light m-btn--hover-light"
                                        >
                                            详细
                                        </a>
                                        <div
                                            class="m-dropdown__wrapper"
                                            style="z-index: 101;"
                                        >
                                            <span
                                                class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"
                                                style="
                                                    left: auto;
                                                    right: 43.5px;
                                                "
                                            ></span>
                                            <div class="m-dropdown__inner">
                                                <div class="m-dropdown__body">
                                                    <div
                                                        class="m-dropdown__content"
                                                    >
                                                        <ul class="m-nav">
                                                            <li
                                                                class="m-nav__item"
                                                            >
                                                                <a
                                                                    href=""
                                                                    class="m-nav__link"
                                                                    routerLink="/app/duct/process"
                                                                >
                                                                    <i
                                                                        class="m-nav__link-icon flaticon-share"
                                                                    ></i>
                                                                    <span
                                                                        class="m-nav__link-text"
                                                                    >
                                                                        所有加工情况
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <!--begin::Widget 29-->
                            <div class="m-widget29">
                                <div
                                    *ngFor="let process of numberOfProcess"
                                    class="m-widget_content"
                                    (click)="
                                        openProcess('', process.processName, '')
                                    "
                                >
                                    <h3 class="m-widget_content-title">
                                        {{ process.processName }}
                                    </h3>
                                    <div class="m-widget_content-items">
                                        <div class="m-widget_content-item">
                                            <span>
                                                全部件数
                                            </span>
                                            <span class="m--font-accent">
                                                {{ process.numberForAll }}
                                            </span>
                                        </div>
                                        <div class="m-widget_content-item">
                                            <span>
                                                任务数量
                                            </span>
                                            <span class="m--font-accent">
                                                {{ process.numberForTask }}
                                            </span>
                                        </div>
                                        <div class="m-widget_content-item">
                                            <span>
                                                暂停
                                            </span>
                                            <span class="m--font-brand">
                                                {{ process.numberForPause }}
                                            </span>
                                        </div>
                                        <div class="m-widget_content-item">
                                            <span>
                                                超期
                                            </span>
                                            <span>
                                                {{
                                                    process.numberForExceedTime
                                                }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Widget 29-->
                        </div>
                    </div>
                    <!--end:: Packages-->
                </div>
                <div class="col-xl-6 col-lg-12">
                    <!--Begin::Portlet-->
                    <div class="m-portlet m-portlet--full-height">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <i
                                        class="la flaticon-alert-2 m--font-info"
                                    ></i>
                                    <h3 class="m-portlet__head-text">
                                        近期问题
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <ul class="m-portlet__nav">
                                    <li
                                        class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push"
                                        m-dropdown-toggle="hover"
                                        aria-expanded="true"
                                    >
                                        <a
                                            href="#"
                                            class="m-portlet__nav-link m-portlet__nav-link--icon m-portlet__nav-link--icon-xl m-dropdown__toggle"
                                        >
                                            <i
                                                class="la la-ellipsis-h m--font-brand"
                                            ></i>
                                        </a>
                                        <div
                                            class="m-dropdown__wrapper"
                                            style="z-index: 101;"
                                        >
                                            <span
                                                class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"
                                                style="
                                                    left: auto;
                                                    right: 21.5px;
                                                "
                                            ></span>
                                            <div class="m-dropdown__inner">
                                                <div class="m-dropdown__body">
                                                    <div
                                                        class="m-dropdown__content"
                                                    >
                                                        <ul class="m-nav">
                                                            <li
                                                                class="m-nav__item"
                                                            >
                                                                <a
                                                                    href=""
                                                                    class="m-nav__link"
                                                                    routerLink="/app/duct/request"
                                                                >
                                                                    <i
                                                                        class="m-nav__link-icon flaticon-share"
                                                                    ></i>
                                                                    <span
                                                                        class="m-nav__link-text"
                                                                    >
                                                                        问题管理
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li
                                                                class="m-nav__item"
                                                            >
                                                                <a
                                                                    href=""
                                                                    class="m-nav__link"
                                                                >
                                                                    <i
                                                                        class="m-nav__link-icon flaticon-share"
                                                                    ></i>
                                                                    <span
                                                                        class="m-nav__link-text"
                                                                    >
                                                                        刷新
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <div class="m-widget3">
                                <div
                                    *ngFor="let requestion of requestions"
                                    class="m-widget3__item"
                                >
                                    <div class="m-widget3__header">
                                        <div
                                            class="m-widget3__user-img"
                                            style="width: 40px;"
                                        >
                                            <span class="m-widget3__time">
                                                {{
                                                    requestion.creationTime
                                                        | date: "MM-dd HH:mm"
                                                }}
                                            </span>
                                        </div>
                                        <div class="m-widget3__info">
                                            <span class="m-widget3__username">
                                                {{ requestion.drawingCode }}
                                            </span>
                                            <br />
                                            <span class="m-widget3__time">
                                                {{ requestion.requesterId }}
                                            </span>
                                            <br />
                                            <span class="m-widget3__time">
                                                {{ requestion.requestInfo }}
                                            </span>
                                        </div>
                                        <span
                                            class="m-widget3__status m--font-success"
                                            *ngIf="requestion.responder"
                                        >
                                            {{ requestion.responder }}
                                        </span>
                                        <span
                                            class="m-widget3__status m--font-warning"
                                            *ngIf="!requestion.responder"
                                        >
                                            <i
                                                class="fa fa-unlink m--font-warning"
                                            ></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End::Portlet-->
                </div>
                <div class="col-md-6 col-sm-12">
                    <div
                        class="m-portlet m-portlet--full-height income-statistics"
                    >
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        <i
                                            class="la flaticon-paper-plane m--font-info"
                                        ></i>
                                        <span
                                            class="caption-subject font-blue bold uppercase"
                                            >产品进展({{
                                                lineInstanceForExecuteOrderByDurationCount
                                            }})</span
                                        >
                                        <small class="d-none d-sm-inline-block">
                                            <span class="caption-helper">
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools"></div>
                        </div>
                        <div class="m-portlet__body">
                            <table
                                class="table table-bordered table-hover"
                                id="m_table_1"
                                role="grid"
                            >
                                <thead>
                                    <th>
                                        图号
                                    </th>
                                    <th>
                                        规格
                                    </th>
                                    <th>
                                        当前工序
                                    </th>
                                    <th>
                                        停留时间
                                    </th>
                                </thead>
                                <tbody>
                                    <tr
                                        role="row"
                                        class="odd"
                                        *ngFor="
                                            let instance of lineInstanceForExecuteOrderByDuration
                                        "
                                    >
                                        <td class="sorting_1">
                                            {{ instance.productionDrawingCode }}
                                        </td>
                                        <td>
                                            {{ instance.productionSpecial }}
                                        </td>
                                        <td>
                                            {{ instance.currentStationName }}
                                        </td>
                                        <td>
                                            {{
                                                (
                                                    (currentTime -
                                                        instance.lastExecutionTime) /
                                                    (60 * 60 * 1000)
                                                ).toFixed(1)
                                            }}小时
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 col-md-5">
                                <div
                                    class="primeng-datatable-container expiring-tenants-table"
                                    (click)="
                                        getDecadeLineInstanceOrderByDuration()
                                    "
                                    ng-reflect-busy-if="false"
                                >
                                    <div
                                        class="primeng-no-data ng-tns-c19-1 ng-star-inserted"
                                        style=""
                                    >
                                        ↓显示更多(还有{{
                                            lineInstanceForExecuteOrderByDurationCount
                                        }}条 )
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div
                        class="m-portlet m-portlet--full-height income-statistics"
                    >
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        <i
                                            class="la flaticon-information m--font-info"
                                        ></i>
                                        <span
                                            class="caption-subject font-blue bold uppercase"
                                            >型号问题</span
                                        >
                                        <small class="d-none d-sm-inline-block">
                                            <span class="caption-helper">
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools"></div>
                        </div>
                        <div class="m-portlet__body">
                            <table
                                class="table table-bordered table-hover dataTable no-footer"
                                id="m_table_1"
                                role="grid"
                            >
                                <thead class="m--font-bolder">
                                    <th>
                                        型号
                                    </th>
                                    <th>
                                        返工数量/占比
                                    </th>
                                    <th>
                                        报废数量/占比
                                    </th>
                                </thead>
                                <tbody>
                                    <tr
                                        role="row"
                                        class="odd"
                                        *ngFor="
                                            let ras of returnAndScrapGroupByModelOutput
                                        "
                                    >
                                        <td class="sorting_1">
                                            {{ ras.modelName }}
                                        </td>
                                        <td>
                                            {{ ras.returnCount }}/{{
                                                (ras.returnRatio * 100).toFixed(
                                                    1
                                                )
                                            }}%
                                        </td>
                                        <td>
                                            {{ ras.scrapCount }}/{{
                                                (ras.scrapRatio * 100).toFixed(
                                                    1
                                                )
                                            }}%
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-sm-12">
                    <div
                        class="m-portlet m-portlet--full-height sales-summary-chart"
                    >
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <i
                                        class="la flaticon-user-settings m--font-info"
                                    ></i>
                                    <h3 class="m-portlet__head-text">
                                        生产小组
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__head">
                            <div
                                class="m-portlet__head-tools"
                                style="margin-left: -10px;"
                            >
                                <div
                                    class="btn-group btn-group-devided"
                                    data-toggle="buttons"
                                >
                                    <label
                                        *ngFor="let workTeam of workTeamList"
                                        id="workTeam"
                                        (click)="
                                            getFilterWorkTeamInfo(workTeam.id)
                                        "
                                        class="btn m-btn--pill btn-secondary"
                                    >
                                        {{ workTeam.displayName }}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__body" style="min-height: 200px;">
                            <table
                                class="table table-bordered table-hover dataTable no-footer"
                                id="m_table_1"
                                role="grid"
                            >
                                <thead class="m--font-bolder">
                                    <th>
                                        月份
                                    </th>
                                    <th>
                                        出库
                                    </th>
                                    <th>
                                        总检内窥
                                    </th>
                                    <th>
                                        弯管
                                    </th>
                                    <th>
                                        焊接
                                    </th>
                                </thead>
                                <tbody>
                                    <tr
                                        role="row"
                                        class="odd"
                                        *ngFor="let w of filterWorkTeamInfo"
                                    >
                                        <td class="sorting_1">
                                            {{ w.monthString }}
                                        </td>
                                        <td>
                                            {{ w.outStoreConut }}
                                        </td>
                                        <td>
                                            {{ w.endoscopyConut }}
                                        </td>
                                        <td>
                                            {{ w.bendDuctConut }}
                                        </td>
                                        <td>
                                            {{ w.weldConut }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row"></div>
        </div>
    </div>
</div>
